<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Crop an image</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1.4.4");
    </script>
    <script type="text/javascript" src="/js/jquery.imgareaselect.js"></script>
    <script type="text/javascript" src="/js/imagemanaging.js"></script>
    <script type="text/javascript">
      var posy = 0;
      var posx = 0;
      var photobig = "{{ photobig }}";

      $(window).load(function () {

        $('#img2crop').clone().attr('id', 'img2cropcopy').appendTo('body').hide();
        var tooBig = false;
        
        var weight = $('#img2cropcopy').attr('naturalWidth') * $('#img2cropcopy').attr('naturalHeight');
        
        var originalWidth = $('#img2cropcopy').attr('naturalWidth');
        var originalHeight = $('#img2cropcopy').attr('naturalHeight');
        
        var ratio = originalWidth/originalHeight;
        
        if (ratio > 4/6) {
          $('#img2crop').attr('height', '432');
        } else {
          $('#img2crop').attr('width', '320');
        }
        
        var naturalSize = $('#img2cropcopy').attr('naturalWidth') + "x" + $('#img2cropcopy').attr('naturalHeight');
        $("#note").text("Tamaño real: " + naturalSize);
        

        var cropper = $('#img2crop').imgAreaSelect({ instance: true });
        cropper.setSelection(0, 0, 320, 432, true);
        cropper.setOptions({
          persistent: true,
          show: true,
          handles: false,
          resizable: false,
          onSelectEnd: function (img, selection) {
            posy = selection.y1;
            posx = selection.x1;
          }
        });
        cropper.update();
      });
      function savePhoto() {
        $.post("/admin/galleries/photo/man/save/", { photobig: photobig, posx: posx, posy: posy },
          function(data){
            var rint = Math.floor(Math.random()*1001)
            window.location.href = "http://testana.latest.tritonapps.appspot.com" + data + "?v=" + rint;
          });
      }
    </script>
    <style type="text/css">
      html, body {
        margin: 0;
        padding: 10px;
        font-family: arial;
        font-size: 90%;
      }
      .imgareaselect-border1 {
      	background: url(/img/border-anim-v.gif) repeat-y left top;
      }
      .imgareaselect-border2 {
        background: url(/img/border-anim-h.gif) repeat-x left top;
      }
      .imgareaselect-border3 {
        background: url(/img/border-anim-v.gif) repeat-y right top;
      }
      .imgareaselect-border4 {
        background: url(/img/border-anim-h.gif) repeat-x left bottom;
      }
      .imgareaselect-border1, .imgareaselect-border2,
      .imgareaselect-border3, .imgareaselect-border4 {
        opacity: 0.5;
        filter: alpha(opacity=50);
      }
      .imgareaselect-handle {
        background-color: #fff;
        border: solid 1px #000;
        opacity: 0.5;
        filter: alpha(opacity=50);
      }
      .imgareaselect-outer {
        background-color: #000;
        opacity: 0.7;
        filter: alpha(opacity=75);
      }
      #meta-actions {
        padding: 5px 0;
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
      <img id="img2crop" src="{{ photobig }}" />
      <div id="meta-actions">
        <input type="button" value="CROP IMAGE" onclick="savePhoto(); return false;" />
      </div>
      <div id="tags">
        
      </div>
      <div id="download-info">
        <a href="{{ photobig }}" target="_blank">Original image</a>
        <p id="note"></p>
      </div>
  </body>
</html>